<template>
  <div class="message-area-container">
    <DataForm />
    <h3>
      {{ title }}
      <span>{{ subTitle }}</span>
    </h3>
    <DataList :list="list" />
    <div class="loading" v-loading="isListLoading"></div>
  </div>
</template>

<script setup lang="ts">
import DataForm from './DataForm.vue'
import DataList from './DataList.vue'

interface Props {
  title: string
  subTitle: string
  list: any[]
  isListLoading: boolean
}

defineProps<Props>()
</script>

<style lang="less" scoped>
.loading {
  position: relative;
  height: 100px;
}
</style>